import 'dart:async';

import 'package:demo/widget/SlidingPanelView.dart';
import 'package:flutter/material.dart';

class SlidingPanelWidget extends StatefulWidget {
  const SlidingPanelWidget({super.key});

  @override
  State<StatefulWidget> createState() {
    return _SlidingPanelWidget();
  }
}

class _SlidingPanelWidget extends State<SlidingPanelWidget> {
  final GlobalKey globalKey = GlobalKey();
  final SliverPanelController _controller =
  SliverPanelController(initPanelState: PanelState.open);
  final StreamController<double> _widgetSizeController = StreamController();
  final ValueNotifier<double> _widgetSize = ValueNotifier(120);

  @override
  Widget build(BuildContext context) {
    //监听widget渲染完成计算高度
    WidgetsBinding.instance.addPostFrameCallback((duration) {
      RenderBox? renderBox =
          globalKey.currentContext?.findRenderObject() as RenderBox?;
      Size? size = renderBox?.size;
      double? height = size?.height;
      // double? height =globalKey.currentContext?.size?.height;
      _widgetSizeController.sink.add(height!);
      _widgetSize.value = height;
    });
    return Scaffold(
      body: Stack(
        children: [
          InkWell(
            onTap: () {
              _controller.data = PanelState.close;
            },
            child: Container(
              width: double.infinity,
              height: double.infinity,
              color: Colors.blue.withAlpha(88),
            ),
          ),
          Align(
              alignment: AlignmentDirectional.bottomCenter,
              child: ValueListenableBuilder(
                valueListenable: _widgetSize,
                builder: (context, value, child) {
                  return SlidingPanelView(
                    headWidget: headView(),
                    bodyWidget: bodyView(),
                    heightClose: _widgetSize.value,
                    controller: _controller,
                  );
                },
              )

              // StreamBuilder<double>(
              //   stream: _widgetSizeController.stream,
              //   builder: (context, snapshot) {
              //     return SlidingPanelView(
              //       headWidget: headView(),
              //       bodyWidget: bodyView(),
              //       heightClose: snapshot.data ?? 120,
              //       controller: _controller,
              //     );
              //   },
              // ),
              ),
        ],
      ),
    );
  }

  Widget headView() {
    debugPrint("headView");
    return Container(
      key: globalKey,
      clipBehavior: Clip.hardEdge,
      decoration: const BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(8), topRight: Radius.circular(8)),
      ),
      child: Column(
        children: [
          Container(
            height: 10,
          ),
          GestureDetector(
            onTap: () {
              if (_controller.data == PanelState.close) {
                _controller.data = PanelState.open;
              } else {
                _controller.data = PanelState.close;
              }
            },
            child: Icon(
              Icons.horizontal_rule_sharp,
              color: Colors.grey.withAlpha(90),
            ),
          ),
          Container(
              margin: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
              padding: const EdgeInsets.symmetric(horizontal: 20),
              decoration: const BoxDecoration(
                color: Color(0XFFF2F4F6),
                borderRadius: BorderRadius.all(Radius.circular(20)),
              ),
              width: double.infinity,
              height: 40,
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Icon(
                    Icons.search,
                    color: Colors.grey.withAlpha(90),
                    size: 20,
                  ),
                  const SizedBox(
                    width: 5,
                  ),
                  Text(
                    'Search',
                    style: TextStyle(
                        color: Colors.grey.withAlpha(90),
                        fontSize: 14,
                        fontWeight: FontWeight.w400),
                  ),
                ],
              ))
        ],
      ),
    );
  }

  Widget bodyView() {
    return Container(
      color: Colors.white,
      child: ListView.builder(
        itemCount: 20,
        shrinkWrap: true,
        padding: EdgeInsets.zero,
        itemBuilder: (context, index) {
          return Container(
            width: double.infinity,
            height: 44,
            alignment: Alignment.center,
            child: Text(
              "text:$index",
              style: const TextStyle(
                color: Colors.black,
              ),
            ),
          );
        },
      ),
    );
  }
  @override
  void dispose() {
    super.dispose();
    _controller.removeListener(() { });
    _controller.dispose();
    _widgetSizeController.close();
    _widgetSize.dispose();
  }


}
